<template>
<label class="bh-radio"
	:class="[
		{ 'is-disabled': isDisabled },
		{ 'is-checked': model === label }
	]">
	<span class="bh-radio__input"
		:class="{
			'is-disabled': isDisabled,
			'is-checked': model === label
		}">
		<span class="bh-radio__inner"></span>
		<input type="radio" class="bh-radio__original" :disabled="isDisabled" :value="label" v-model="model" name="" @change="handleChange">
	</span>
	<span class="bh-radio__label">
		<slot></slot>
		<template v-if="!$slots.default">{{label}}</template>
	</span>
</label>
</template>

<script>
import Emitter from '../../../../src/mixins/emitter';

export default {
	name: 'bh-radio',
	mixins: [Emitter],
	props: {
		value: {},
		label: {},
		disabled: Boolean,
	},
	data() {
		return {
			radioGroup: null,
		}
	},
	computed: {
		isGroup() {
			let parent = this.$parent;
			if (parent.$options.componentName == 'BHRadioGroup') {
				return true;
			} else {
				return false;
			}
		},
		model: {
			get() {
				return this.isGroup ? this.radioGroup && this.radioGroup.value : this.value;
			},
			set(val) {
				if (this.isGroup) {
					this.$dispatch('BHRadioGroup', 'input', [val]);//变化时触发父级的值变化
				} else {
					this.$emit('input', val);
				}
			},
		},
		isDisabled() {
			return this.disabled;
		},
	},
	methods: {
		handleChange() {
			this.$nextTick(() => {
				this.$emit('change', this.model);
				this.isGroup && this.$dispatch('BHRadioGroup', 'handleChange', this.model);//触发父级的变化回调
			});
		},
	},
	mounted() {
		let parent = this.$parent;
		if (parent.$options.componentName == 'BHRadioGroup') {
			this.radioGroup = parent;
		}
	},
}
</script>
